<template>
  <div class="custom-head-dropdown">
    <a-dropdown overlayClassName="avatar-dropdown">
      <div class="avatar">
        <a-avatar size="small" src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"/>
        <span class="name">超级管理员</span>
      </div>
      <a-menu slot="overlay">
        <a-menu-item>
          <a-icon type="user"/>
          <a href="javascript:">个人中心</a>
        </a-menu-item>
        <a-menu-item>
          <a-icon type="setting"/>
          <a href="javascript:">个人设置</a>
        </a-menu-item>
        <a-menu-divider/>
        <a-menu-item>
          <a-icon type="logout"/>
          <a href="javascript:">退出登录</a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script>
export default {
  name: "AvatarDropdown"
}
</script>

<style lang="stylus">
.custom-head-dropdown {
  .avatar {
    .ant-avatar {
      margin-top: -2px;
    }

    .name {
      display: inline-block;
      margin-left: 10px;
    }
  }
}

.avatar-dropdown {
  .ant-dropdown-menu-item {
    min-width: 160px;
    padding: 6px 12px;

    a {
      display: inline-block;
    }
  }
}
</style>